<template>
  <div class="page-wrap" v-if="banks.length>0">

    <div class="form">
      <div >
        <view class="form-item uni-column">
          <div class="label">提现银行</div>
          <picker @change="bindBrand" :value="bankidx" :range="banks" range-key="name" mode="selector">
            <view class="uni-input c5">{{banks[bankidx].name}}</view>
          </picker>
        </view>
        <block v-if="ext">
        <view class="form-item uni-column">
          <div class="label">开户支行</div>
          <input @input="inputSubbranch" class="fun-input"  />
        </view>
        <view class="form-item uni-column">
          <div class="label">卡户姓名</div>
          <input @input="inputUsername" class="fun-input"  />
        </view>
        <view class="form-item uni-column">
          <div class="label">卡号</div>
          <input @input="inputCard" class="fun-input"   />
        </view>
        </block>
        <view class="form-item uni-column">
          <div class="label">提现金额</div>
          <input @input="inputNumber" type="digit" class="fun-input"  />
          <div class="fz-12 text-right c9">可以提现金额<span class="price">￥{{extInfo.cashing_money}}</span></div>
        </view>
        <view class="form-item action">
          <button @click="addWithdraw" class="sub-btn m-b-10 withdraw-btn">发起提现</button>
          <div class="fz-12 c9">提现平台收取<span class="color-red">2%</span>的手续费</div>
        </view>

      </div>

    </div>

  </div>
</template>

<script>

import { mapGetters, mapActions } from 'vuex'
import { flashUserInfo, getUserAmountLog, bank, withdraw } from '@/api'

import { emptyObject } from '@/common/helper'
import { toast, error, backFunc as goBack } from '@/common/fun'
import { pageMixin } from '@/mixins'

export default {
  mixins: [pageMixin],
  components: {

  },
  data () {
    return {
      ext: false,
      banks: [],
      bankidx: 0,
      formData: {
        user_bank_subbranch: '',
        user_bank_name: '',
        user_card_num: '',
        user_bank_username: '',
        number: '',
        auto: 0
      },
      extInfo: {
        freeze_money: 0,
        cashed_money: 0,
        cashing_money: 0
      }
    }
  },
  methods: {
    addWithdraw () {
      this.formData.user_bank_name = this.banks[this.bankidx].name

      if (parseFloat(this.formData.number) > parseFloat(this.extInfo.cashing_money)) {
        error('提现金额超出余额')
        return
      }
      if (this.ext) {
        if (!emptyObject({ obj: this.formData, strice: 1 })) {
          error('提现信息填写有误')
          return
        }
      }

      this.formData.auto = this.ext ? 0 : 1 // 是否自动转账的
      withdraw({ ...this.formData, action: 'add' }).then(res => {
        toast('提现成功')
        goBack()
        // uni.navigateTo({
        //     url:"/pages/distributor/index"
        // })
      })
    },
    inputNumber (e) {
      this.formData.number = e.detail.value
    },
    inputUsername (e) {
      this.formData.user_bank_username = e.detail.value
    },
    inputCard (e) {
      this.formData.user_card_num = e.detail.value
    },
    inputSubbranch (e) {
      this.formData.user_bank_subbranch = e.detail.value
    },
    flashShowExt () {
      // console.log(typeof this.banks[this.bankidx].auto, this.banks[this.bankidx].auto, this.banks[this.bankidx].auto === 1)
      this.ext = this.banks[this.bankidx].auto === 0
    },
    bindBrand (e) {
      this.bankidx = e.target.value
      this.flashShowExt()
    },
    toDistributor () {
      uni.navigateTo({
        url: '/pages/distributor'
      })
    },
    toVip () {
      uni.navigateTo({
        url: '/pages/user/vip'
      })
    },
    toProfile () {
      uni.navigateTo({
        url: '/pages/user/profile'
      })
    },
    toLogin () {
      uni.navigateTo({
        url: '/pages/user/login'
      })
    },
    async init () {
      bank({ size: 999 }).then(res => {
        this.banks = res.data.list
      })
      await flashUserInfo({ type: 'ext' }, { tip: '' }).then(res => {
        this.extInfo = res.data
      })
      await getUserAmountLog({ size: 999, type: 2, action: 1 }).then(res => {
        this.addList = res.data.list
      })

      await getUserAmountLog({ size: 999, type: 1, action: -1 }).then(res => {
        this.minusList = res.data.list
      })
    },
    ...mapActions(['user/setUserInfo'])
  },
  onLoad () {
    console.log(22)
  },
  onShow () {
    this.init()
  },

  computed: {
    userInfo () {
      return this.$store.getters['user/getUserInfo']()
    }

  }
}
</script>

<style lang="scss" scoped="scoped">
.withdraw-btn{
  background: $fun-primary-color;
  color: white;
}
.page-wrap{
  background: #fff;
  min-height: 100vh;

}
.form{
  .form-item{
    margin: 0 30rpx;
    border-bottom: 1px solid #e7e7e7;
    height: 80rpx;
    display: flex;
    margin-bottom: 30rpx;
    align-items: center;
    .label{
      width: 70px;
      font-size: 14px;
      color: #666;
    }
    .sendCaptcha{

      .text{
        color: #999;
        &.active{
          color: $fun-primary-color;
        }
      }
    }
    .fun-input{
      flex: 1;
      height: 80rpx;
      line-height: 80rpx;
      font-size: 14px;
      color: #444;
      text-align: left;
      &::placeholder{
        color: #999;
      }
    }
  }
  .action{
    display: block;
  }

}
</style>
